<template>
    <div class="login">
        <LoginHeader>
            <el-form
                    :rules="rules"
                    :model="ruleForm"
                    ref="ruleForm"
                    label-position="left"
                    label-width="0px"
                    slot="container"
            >
                <div class="title">
                    <h3>账号密码登录</h3>
                </div>

                <!--                username-->
                <el-form-item prop="username">
                    <el-input type="text" v-model="ruleForm.username" aria-autocomplete="true" placeholder="账号">
                        <i slot="prefix" class="fa fa-user-o"></i>
                    </el-input>
                </el-form-item>

                <!--                password-->
                <el-form-item prop="pwd">
                    <el-input type="password" @keyup.native.enter="handleSumbit" v-model="ruleForm.pwd" aria-autocomplete="false" placeholder="密码">
                        <i slot="prefix" class="fa fa-lock"></i>
                    </el-input>
                </el-form-item>

                <!--                登录按钮-->
                <el-form-item>
                    <el-button
                            :loading="isLogin"
                            type="primary"
                            style="width: 100%;"
                            @click="handleSumbit"
                    >
                        登录
                    </el-button>
                </el-form-item>

                <!--                7天自动登录和忘记密码?-->
                <el-form-item>
                    <el-checkbox v-model="ruleForm.autoLogin" class="autoLogin" :aria-checked="ruleForm.autoLogin">7天内自动登录</el-checkbox>
                    <el-button type="text" @click="$router.push('/password')" class="forget">忘记密码?</el-button>
                </el-form-item>
            </el-form>
        </LoginHeader>

    </div>

</template>
<script lang="ts">
    import {Component, Vue, Provide} from 'vue-property-decorator'
    import LoginHeader from './LoginHeader.vue'

    @Component({
        components: {LoginHeader}
    })

    export default class Login extends Vue {
        //校验是否登录
        @Provide() isLogin:boolean = false;

        //表单所需用户信息
        @Provide() ruleForm: {
            username:string;
            pwd:string;
            autoLogin:boolean;
        } = {
            username: '',
            pwd: '',
            autoLogin:true,
        }

        //校验用户名和密码
        @Provide() rules={
            username:[{required:true,message:'请输入账号',trigger:"blur"}],
            pwd:[{required:true,message:'请输入密码',trigger:"blur"}]
        }

        //提交表单
        handleSumbit():void{
            (this.$refs["ruleForm"] as any).validate((valid:boolean)=>{
                if(valid){
                    // console.log('校验通过');
                    this.isLogin = true;
                    (this as any).$axios
                        .post("/api/users/login",this.ruleForm)
                        .then((res:any)=>{
                            this.isLogin=false;
                            //存储token
                            localStorage.setItem('tsToken',res.data.token);
                            //登录成功，进行跳转
                            this.$router.push('/')
                        })
                        .catch(()=>{
                            this.isLogin=false
                        })
                }
            })


        }


    }

</script>


<style lang="scss" scoped>
    .title {
        margin: 0px auto 40px auto;
        text-align: center;
        color: #505458;
    }

    i {
        font-size: 14px;
        margin-left: 8px;
    }
    
    .autoLogin{
        float: left;
    }

    .forget {
        float: right;
    }
</style>
